<template>
	<el-container>
		<el-main>
			<el-container class="parent-body">
				<el-header class="content-header">
					<i class="el-icon-s-unfold"></i>
					商品详细
					<div style="float:right;">
						<el-button @click="goBack">
							<i class="el-icon-back" slot="prefix"></i>
							返回
						</el-button>
					</div>
				</el-header>
				<el-main>
					<div class="module-div-01">
						<div class="module-row">
							<div class="module-row-left">
								<div class="classify-icon">
									<i class="el-icon-collection-tag"></i>
									基本信息
								</div>
							</div>
							<el-container>
								<el-main>
									<div class="module-mokuai">
										<div class="module">
											<el-form
												ref="refForm"
												:model="spu"
												:inline="true"
												label-width="80px"
											>
												<el-form-item
													label="商品分类"
													prop="category"
												>
													<el-input
														:disabled="true"
														:value="
															form.categoryName
														"
													></el-input> </el-form-item
												><br />
												<el-form-item label="商品名称">
													<div
														class="form-span-color form-span-width"
													>
														<span>{{
															spu.name
														}}</span>
													</div>
												</el-form-item>
												<el-form-item label="副标题">
													<div
														class="form-span-color form-span-width"
													>
														<span>{{
															spu.subhead
														}}</span>
													</div>
												</el-form-item>
												<el-form-item label="商品货号">
													<div
														class="form-span-color form-span-width"
													>
														<span>{{
															spu.encode
														}}</span>
													</div>
												</el-form-item>
												<el-form-item label="商品品牌">
													<div
														class="form-span-color form-span-width"
													>
														<span>{{
															spu.brandName
														}}</span>
													</div>
												</el-form-item>
												<el-form-item
													label="运费模板"
													prop="freight"
												>
													<div
														class="form-span-color form-span-width"
													>
														<span>{{
															form.freightName
														}}</span>
													</div> </el-form-item
												><br />
												<el-form-item label="服务保证">
													<el-checkbox-group
														v-model="spu.serve"
													>
														<el-checkbox
															:disabled="true"
															label="无忧退货"
															name="serve"
														></el-checkbox>
														<el-checkbox
															:disabled="true"
															label="快速退款"
															name="serve"
														></el-checkbox>
														<el-checkbox
															:disabled="true"
															label="免费包邮"
															name="serve"
														></el-checkbox>
													</el-checkbox-group> </el-form-item
												><br />
												<el-form-item
													label="商品介绍"
													prop="desc"
												>
													<el-input
														:disabled="true"
														type="textarea"
														:rows="8"
														v-model="spu.desc"
														class="form-textarea"
													></el-input>
												</el-form-item>
											</el-form>
										</div>
									</div>
								</el-main>
							</el-container>
						</div>
						<el-form
							:inline="true"
							:model="form"
							class="demo-form-inline"
						>
							<!-- 商品属性 -->
							<div class="module-row">
								<div class="module-row-left">
									<div class="classify-icon">
										<i class="el-icon-collection-tag"></i>
										商品属性
									</div>
								</div>
								<el-container>
									<el-main>
										<div class="module-mokuai">
											<div class="module">
												<el-form-item
													label="规格参数组:"
												>
													<el-input
														v-model="temp.name"
														:disabled="true"
													></el-input>
												</el-form-item>
											</div>
											<!-- table表 -->
											<div class="module">
												<el-table
													:data="sku.tableData"
													border
													style="width: 100%"
													:header-cell-style="
														headerCellStyle
													"
												>
													<el-table-column
														v-for="(item,
														index) in sku.column"
														:key="index"
														:prop="item.propName"
														:label="item.label"
														width="130"
														align="center"
													></el-table-column>
													<!-- <el-table-column prop="name" label="颜色" width="120" align="center"></el-table-column> -->
													<el-table-column
														label="销售价格 (元)"
														width="180"
														align="center"
													>
														<template scope="scope">
															<el-input
																:disabled="true"
																v-model.trim="
																	scope.row
																		.price
																"
															></el-input>
														</template>
													</el-table-column>
													<el-table-column
														label="商品库存"
														width="180"
														align="center"
													>
														<template scope="scope">
															<el-input
																:disabled="true"
																v-model.number="
																	scope.row
																		.repertory
																"
															></el-input>
														</template>
													</el-table-column>
													<el-table-column
														label="库存预警值"
														width="180"
														align="center"
													>
														<template scope="scope">
															<el-input
																:disabled="true"
																v-model.number="
																	scope.row
																		.warning
																"
															></el-input>
														</template>
													</el-table-column>
													<el-table-column
														label="SKU编号"
														align="center"
														width="180"
													>
														<template scope="scope">
															<el-input
																:disabled="true"
																v-model="
																	scope.row
																		.encode
																"
															></el-input>
														</template>
													</el-table-column>
													<el-table-column
														label="操作"
														align="center"
													>
														<template scope="scope">
															<el-button
																type="text"
																@click="
																	initRowInfo(
																		scope.$index
																	)
																"
																size="small"
																>更多信息</el-button
															>
														</template>
													</el-table-column>
												</el-table>
												<el-footer
													v-show="sku.page.total > 10"
													class="footer-style"
												>
													<!-- 分页 -->
													<div class="pagination">
														<div class="block">
															<el-pagination
																@current-change="
																	specPageChange
																"
																layout="prev, pager, next"
																:current-page="
																	sku.page
																		.pageNum
																"
																:page-size="
																	sku.page
																		.pageSize
																"
																:pager-count="
																	11
																"
																:total="
																	sku.page
																		.total
																"
															></el-pagination>
														</div>
													</div>
												</el-footer>
											</div>
										</div>
									</el-main>
								</el-container>
							</div>
							<!-- 商品参数 -->
							<div class="module-row">
								<div class="module-row-left">
									<div class="classify-icon">
										<i class="el-icon-collection-tag"></i>
										商品参数
									</div>
								</div>
								<el-container>
									<el-main>
										<div class="module-mokuai">
											<!-- 参数列表 -->
											<div class="module">
												<el-row
													type="flex"
													class="row-bg"
												>
													<el-col :span="4">
														<div
															class="grid-content bg-purple bg-color row-height"
															style="font-weight: bold;color: #909399;"
														>
															参数类型
														</div>
													</el-col>
													<el-col :span="20">
														<div
															class="grid-content bg-purple bg-color row-height"
															style="font-weight: bold;color: #909399;"
														>
															参数值
														</div>
													</el-col>
												</el-row>
												<el-row
													v-for="(item,
													index) in temp.param"
													:key="index"
													type="flex"
													class="row-bg"
												>
													<el-col :span="4">
														<div
															class="grid-content bg-purple row-height"
														>
															{{ item.name }}
														</div>
													</el-col>
													<el-col :span="20">
														<div
															class="grid-content bg-purple row-height"
														>
															<el-date-picker
																value-format="yyyy年MM月dd日"
																format="yyyy年MM月dd日"
																v-if="
																	item.type ==
																		'date'
																"
																v-model="
																	item.value
																"
																align="right"
																type="date"
																:disabled="true"
																class="select-width-3"
																:picker-options="
																	pickerOptions
																"
															></el-date-picker>
															<el-input
																v-if="
																	item.type ==
																		'text'
																"
																:disabled="true"
																v-model="
																	item.value
																"
																class="select-width-3"
																size="small"
															></el-input>
														</div>
													</el-col>
												</el-row>
											</div>
										</div>
									</el-main>
								</el-container>
							</div>
							<!-- 商品相册 -->
							<div class="module-row">
								<div class="module-row-left">
									<div class="classify-icon">
										<i class="el-icon-collection-tag"></i>
										商品相册
									</div>
								</div>
								<el-container>
									<el-main>
										<div class="module-mokuai">
											<!-- 图片 -->
											<div class="module-background">
												<div
													class="padding-simple"
													v-if="spu.images.length > 0"
												>
													<!-- 一张图片 -->
													<div
														v-for="(item,
														index) in spu.images"
														:key="index"
														class="img-div"
													>
														<div
															class="demo-image img-div-inner"
														>
															<el-image
																class="img-div-inner-img"
																:src="item.url"
																:fit="image.fit"
															></el-image>
														</div>
														<div
															class="img-div-bottom"
														>
															<div
																type="text"
																:class="{
																	'color-red':
																		item.url ==
																		spu
																			.image
																			.url,
																}"
															>
																{{
																	item.url ==
																	spu.image
																		.url
																		? '商品主图'
																		: '商品图片'
																}}
															</div>
														</div>
													</div>
												</div>
											</div>
										</div>
									</el-main>
								</el-container>
							</div>
							<!-- 商品详情 -->
							<div class="module-row">
								<div class="module-row-left">
									<div class="classify-icon">
										<i class="el-icon-collection-tag"></i>
										商品详情
									</div>
								</div>
								<el-container>
									<el-main>
										<div class="module-mokuai">
											<!-- 文本域 -->
											<div class="module-goodsDetail">
												<editor-bar
													v-model="editor.detail"
													:isClear="editor.isClear"
												></editor-bar>
											</div>
										</div>
									</el-main>
								</el-container>
							</div>
						</el-form>
					</div>
				</el-main>
			</el-container>
			<!-- 对话框 上传图片 -->
			<el-dialog
				title="上传图片"
				:visible.sync="image.dialog"
				width="50%"
			>
				<el-form
					:inline="true"
					:model="image.data"
					class="demo-form-inline"
				>
					<el-form-item label="商品名称:" label-width="100px">
						<el-input
							placeholder
							v-model="image.data.name"
							:disabled="true"
						></el-input>
					</el-form-item>
					<el-form-item label="商品类型名称:" label-width="100px">
						<el-input
							placeholder
							v-model="temp.name"
							:disabled="true"
						></el-input>
					</el-form-item>
					<br />
					<el-form-item
						v-for="(item, index) in sku.column"
						:key="index"
						:label="item.label + ':'"
						label-width="100px"
					>
						<el-input
							placeholder
							v-model="sku.data[item.propName]"
							:disabled="true"
						></el-input>
					</el-form-item>
					<br />
					<el-form-item
						label="属性图片:"
						class="dialog-image"
						label-width="100px"
					>
						<div class="module-background">
							<div
								class="padding-simple"
							>
								<!-- 一张图片 -->
								<div
									v-for="(item, index) in image.data.fileList"
									:key="index"
									class="img-div"
								>
									<div class="demo-image img-div-inner">
										<el-image
											class="img-div-inner-img"
											:src="item.url"
											:fit="image.fit"
										></el-image>
									</div>
									<div class="img-div-bottom">
										<div
											type="text"
											:class="{
												'color-red':
													item.url ==
													sku.data.image.url,
											}"
										>
											{{
												item.url == sku.data.image.url
													? '商品主图'
													: '商品图片'
											}}
										</div>
									</div>
								</div>
							</div>
						</div>
					</el-form-item>
					<br />
				</el-form>
				<span slot="footer" class="dialog-footer">
					<el-button type="primary" @click="image.dialog = false"
						>确 定</el-button
					>
				</span>
			</el-dialog>
		</el-main></el-container
	>
</template>

<script>
import EditorBar from '@/components/wangEnduit'
import request from '@/utils/request'
import brandApi from '@/api/goods/brand'
import templateApi from '@/api/goods/template'
import specApi from '@/api/goods/spec'
import skuApi from '@/api/goods/sku'
import spuApi from '@/api/goods/spu'
import freightApi from '@/api/settings/freight'
// 文件引入（注意：由于是函数，故名字要和函数的名字一致）
// import { dateFormat } from 'vux' 使用失败 原因
import axios from 'axios'

export default {
	data() {
		return {
			pickerOptions: {
				disabledDate(time) {
					return time.getTime() > Date.now()
				},
			},
			// 分类选择
			options: [],
			cardOptions: [],
			// 品牌列表
			brands: [],
			// 运费模板列表
			freights: [],
			// 规格参数模板
			temp: {
				id: null,
				name: '',
				spec: [],
				param: [],
			},
			//  商品spu
			spu: {
				id: null,
				name: '',
				subhead: '',
				category: [],
				brand: null,
				freight: null,
				desc: '',
				encode: '',
				serve: [],
				image: {},
				images: [],
			},
			// 商品sku
			sku: {
				// 表格行对象
				data: {
					name: '',
					price: '',
					repertory: '',
					warning: '',
					encode: '',
					image: {
						url: '',
						name: '',
					},
					images: [],
				},
				column: [],
				tableData: [],
				page: {
					pageNum: 1,
					pageSize: 6,
					total: null,
				},
			},
			// 表单
			form: {
				categoryName: '',
				freightName: '',
			},
			// 富文本编辑器
			editor: {
				isClear: false,
				detail: '',
				url:
					request.defaults.baseURL +
					'/api-goods/spu/uploadImage/editor',
			},
			// 对话框 图片上传
			image: {
				// 图片 渲染方式 组
				// fits: ["fill"],
				// 图片渲染方式
				fit: 'cover',
				// 对话框 上传图片
				dialog: false,
				data: {
					name: '',
					fileList: [],
				},
			},
		}
	},
	components: { EditorBar },
	methods: {
		// 初始化商品分类card
		initData() {
			brandApi.listAll().then((response) => {
				this.brands = response.data.data
			})
			freightApi.listAll().then((response) => {
				this.freights = response.data.data
			})
			this.initCategoryList()
		},
		async initCategoryList() {
			await axios
				.get(request.defaults.baseURL + '/api-goods/category/listAllVo')
				.then((response) => {
					this.options = response.data.data
					let card = {
						selected: null,
						name: null,
						option: this.options,
					}
					// this.card.option = this.options;
					this.cardOptions.splice(this.cardOptions.length, 0, card)
				})
		},
		// 初始化规格
		initTempSpec() {
			specApi.findByTemplateId(this.temp.id).then((response) => {
				var spe = response.data.data
				spe.forEach((item, index) => {
					// 规格数组
					var spec = {
						id: item.id,
						name: item.name,
						option: [],
						options: item.options.split(';'),
					}
					this.temp.spec.splice(this.temp.spec.length, 0, spec)
					// 规格表 规格属性
					var head = {
						label: item.name,
						propName: 'spec_' + index,
					}
					this.sku.column.splice(
						index,
						this.sku.column.length - index,
						head
					)
				})
			})
		},
		// 初始化Sku规格表
		initSkuSpecTable() {
			skuApi
				.pageList(
					this.sku.page.pageNum,
					this.sku.page.pageSize,
					this.spu.id
				)
				.then((response) => {
					this.sku.page.total = response.data.data.total
					response.data.data.list.forEach((item, index) => {
						var price = Number(item.price).toFixed(2)
						var unit = {
							id: item.id,
							encode: item.encode,
							name: item.name,
							price: isNaN(price) ? null : price,
							repertory: item.repertory,
							warning: item.warning,
							spuId: item.spuId,
							image: {},
							images: [],
						}
						if (item.image) {
							unit.image = JSON.parse(item.image)
						}
						if (item.images) {
							unit.images = JSON.parse(item.images)
						}
						var specs = JSON.parse(item.spec)
						specs.forEach(($item) => {
							// var specItem = $item.split(":");
							// 动态添加对象属性
							// this.$set(this.sku.data, specItem[0], specItem[1]);
							// 将数据转成JSON数据 由于data数据是动态绑定 不进行转换将导致数据全部一致
							// var json = JSON.stringify(target);
							// 将JSON数据转为对象  并添加到对象数据表中
							this.$set(unit, $item.prop, $item.value)
						})
						this.sku.tableData.splice(
							index,
							this.sku.tableData.length - index,
							// JSON.parse(json)
							unit
						)
					})
				})
		},
		// 初始化模板信息
		initFormTempName() {
			templateApi.findById(this.temp.id).then((response) => {
				this.temp.name = response.data.data.name
			})
		},
		// 获取商品SPU信息
		initSpuData() {
			if (this.$route.query.id != undefined) {
				this.active = 2
				spuApi.getOne(this.$route.query.id).then((result) => {
					const temp = result.data.data
					this.freights.forEach((item) => {
						if (item.id == temp.freightId) {
							this.form.freightName = item.name
						}
					})
					var category = temp.categoryId.split(';')
					this.spu = {
						id: temp.id,
						name: temp.name,
						subhead: temp.caption,
						category: category,
						brand: temp.brandId,
						brandName: temp.brandName,
						freight: temp.freightId,
						desc: temp.introduction,
						encode: temp.encode,
						serve: [],
						image: {},
						images: [],
						// para: [],
					}
					if (temp.service) {
						this.spu.serve = temp.service.split(';')
					}
					category.forEach((item, index) => {
						this.setCategorySelected(index, item - 0)
					})
					if (temp.image) {
						// this.$set(this.spu,"images",JSON.parse(temp.image))
						this.spu.image = JSON.parse(temp.image)
					}
					if (temp.images) {
						this.$set(this.spu, 'images', JSON.parse(temp.images))
					}
					if (temp.para) {
						this.$set(this.temp, 'param', JSON.parse(temp.para))
					}
					this.editor.detail = temp.description
					// this.initTempParam()
					this.initFormTempName()
					this.initTempSpec()
					this.initSkuSpecTable()
				})
			}
		},
		// 设置选中分类
		setCategorySelected(index, selected) {
			this.$set(this.cardOptions[index], 'selected', selected)
			// 设置模板ID
			this.cardOptions[index].option.forEach((item) => {
				if (selected == item.categoryId) {
					this.cardOptions[index].name = item.categoryName
					if (index == 0) {
						this.form.categoryName = item.categoryName
					} else {
						this.form.categoryName += ' > ' + item.categoryName
					}
					this.$set(this.temp, 'id', item.categoryTemplateId)
				}
				if (item.categoryId == selected && item.childList.length > 0) {
					let card = {
						selected: null,
						name: null,
						option: item.childList,
					}
					this.cardOptions.splice(
						index + 1,
						this.cardOptions[index].option.length - index - 1,
						card
					)
				}
			})
		},

		// 富文本操作
		editorChange() {},

		// SKU
		// 规格table表 初始化行元素对象
		initRowInfo(index) {
			this.sku.data = this.sku.tableData[index]
			this.image.data.name = this.sku.data.name
			this.image.data.fileList = []
			this.sku.data.images.forEach((item, index) => {
				this.image.data.fileList.splice(
					index,
					this.image.data.fileList.length - index,
					item
				)
			})
			this.image.dialog = true
		},
		// 当前页更改后操作
		specPageChange(value) {
			this.sku.page.pageNum = value
			this.initSkuSpecTable()
		},

		// 返回
		goBack() {
			this.$router.go(-1)
		},

		headerCellStyle() {
			return 'background-color: #f9fafc;'
		},
		arrayToString(arr) {
			var arrStr = ''
			arr.forEach((item, index) => {
				if (index == 0) {
					arrStr = item
				} else {
					arrStr += ';' + item
				}
			})
			return arrStr
		},
	},
	created() {
		this.initData()
	},
	mounted() {
		this.initSpuData()
	},
}
</script>
<style scoped>
/* 图片选中 */
.checkbox-module {
	padding: 20px 0 20px 10px;
	margin: auto;
	margin-top: 50px;
}

.goodMessage-page {
	float: right;
}
/*  */
.float-left {
	float: left;
}
.float-right {
	float: right;
}
.color-red {
	color: #f04844;
}
.form-span-color {
	color: #999999;
}
.form-span-width {
	width: 300px;
}
.margin-left-10 {
	margin-left: 10px;
}
.padding-simple {
	padding: 20px;
}
.img-div {
	margin-top: 10px;
	width: 170px;
	display: inline-block;
	border: 1px solid #e4e4e4;
	border-radius: 5px;
}
.img-div-inner {
	padding: 15px;
}
.img-div-inner-img {
	width: 140px;
	height: 140px;
	border-radius: 2px;
}
.img-div-bottom {
	width: 170px;
	border-top: 1px solid #e4e4e4;
	height: 40px;
	line-height: 40px;
	color: #999999;
	background-color: rgb(240, 240, 240);
	text-align: center;
}
.goodsMessage-button {
	margin-top: 8px;
	padding-left: 70px;
}
.marginleft-button {
	margin-left: 10px;
}
/*第二模块  */
/* .module-mokuai2 {
  padding-top: 30px;
  padding-left: 20px;
  background-color: #fff;
} */
.form-textarea {
	width: 680px;
}
.form-textarea textarea {
	overflow-y: visible;
}
/*  */
.module-goodsDetail {
	margin-top: 20px;
}
.select-width-3 {
	width: 300px;
}
.el-main-footer {
	width: 96%;
	border-top: 1px solid #f1f1f1;
	/* position: absolute; */
	text-align: center;
	padding-top: 12px;
	margin-left: 2%;
	margin-bottom: 30px;
}
/*  模块 */
.module-mokuai {
	padding-top: 20px;
	padding-left: 20px;
}
.module {
	/* width: 100%; */
	margin-top: 30px;
}
.module-background {
	/* 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)； */
	width: calc(100% - 42px);
	padding: 20px;
	background-color: #f9fafc;
	border: 1px solid #e4e4e4;
}
.module-row {
	width: calc(100% - 202px);
	min-height: 100%;
	padding-left: 180px;
	padding-right: 20px;
	background-color: #fff;
	position: relative;
}
.module-row-left {
	z-index: 1;
	width: 180px;
	/* min-height: calc(100% - 20px); */
	border-right: 1px solid #e4e4e4;
	background-color: #fcfcfc;
	position: absolute;
	bottom: 0px;
	left: 0px;
	top: 0px;
}
.module-div-01 {
	border: 1px solid #e4e4e4;
	margin-bottom: 20px;
	background-color: #fff;
}
.module-div-02 {
	z-index: 1;
	width: 180px;
	border-right: 1px solid #e4e4e4;
	background-color: #fcfcfc;
	bottom: 0px;
	left: 0px;
	top: 0px;
	position: absolute;
}
/* 级联模块 */
.cascader-div {
	margin-top: 20px;
	margin-bottom: 50px;
	height: 400px;
	float: left;
}
/* 级联模块 左边箭头 */
.cascader-div-left {
	vertical-align: middle;
	margin: 0 10px;
	display: inline-block;
}
/* 级联模块 card */
.box-card {
	vertical-align: middle;
	width: 280px;
	height: 394px;
	display: inline-block;
	color: #999999;
}
.cascader-div .box-card .card-item {
	font-size: 14px;
	width: 280px;
	line-height: 41px;
	height: 41px;
	text-align: left;
}
.card-item-border {
	border-bottom: 1px solid #e4e4e4;
}
.card-item a {
	height: 41px;
	color: #999999;
}
.card-item .active {
	background-color: rgba(242, 242, 242, 1);
	color: #0099ff;
}
.card-item .a-div {
	padding-left: 20px;
	width: 225px;
	display: inline-block;
}
/* .item-content:after {
  content: "\e6e0";
} */

.clearfix:before,
.clearfix:after {
	display: inline-table;
	content: '';
}
.clearfix:after {
	clear: both;
}
.input-color {
	width: 150px;
}
.el-checkbox {
	margin-right: 10px;
}
.box-card-list {
	overflow-y: auto;
	overflow-x: hidden;
	height: 335px;
}
.classify-icon {
	background: url('./../../../../assets/images/u2198.png') no-repeat;
	width: 200px;
	height: 50px;
	line-height: 50px;
	color: #fff;
	padding-left: 40px;
	position: absolute;
	top: 60px;
	right: -60px;
}
.footer-style {
	background-color: #fdfdfe;
	height: 60px;
	line-height: 60px;
	border: 1px solid #ebeef5;
	border-top: 0;
	position: relative;
}
.footer-style .pagination {
	position: absolute;
	right: 10px;
	display: inline-block;
	top: 15px;
}
</style>
<style>
.box-card .el-card__body {
	padding: 0;
}
.module-row .scrollbar-wrap {
	/* overflow-y: auto;*/
	overflow-x: hidden;
}
.module-row .el-scrollbar {
	height: 100%;
}
.module-row .el-col {
	height: 47px !important;
}
.module-row .row-height {
	height: 46px;
	line-height: 46px !important;
}
.checkbox-module .el-checkbox__input {
	position: absolute !important;
	right: 5px;
	top: 5px;
	z-index: 1;
}
.checkbox-module .el-checkbox__label {
	padding-bottom: 10px;
}
.dialog-image .el-form-item__content {
	width: 780px;
}
</style>
